<div id="modals">


    <div class="modal fade" id="modal-edit" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" method="post">
                        <input type="hidden" name="id" value=""/>
                        <table class="table table-striped table-bordered " width="100%">
                            <tr>
                                <th>分公司</th>
                                <td>
                                    <select class="form-control  input-medium inline" name="branchId"></select>
                                    <input type="hidden" name="branchName" data-ref="branchId"/>
                                </td>
                            </tr>
                            <tr>
                                <th>加盟店</th>
                                <td>
                                    <select class="form-control  input-medium inline" name="liteId"></select>
                                    <input type="hidden" name="liteName" data-ref="liteId"/>
                                </td>
                            </tr>
                            <tr>
                                <th>当前积分</th>
                                <td>
                                    <input class="form-control input-small inline " type="text" name="integral" value="">
                                    <span><i class="fa fa-question-circle"  title="修改当前会员积分，不影响该会员总积分"></i></span>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-check"></i> 保存</button>
                    <button type="button" class="btn dark  btn-outline radius6" data-dismiss="modal"><i
                            class="fa fa-close"></i> 关闭
                    </button>
                </div>
            </div>
        </div>
    </div>


</div>
<div class="row">
    <div class="top-handle-btn">
        <form id="search-form" action="javascript:;">
            分公司 <select name="branchId" class="form-control input-medium">
                <option value="">全部</option>
            </select>
            加盟店 <select name="liteId" class="form-control input-small">
                <option value="">全部</option>
            </select>
            <input type="text" placeholder="昵称" class="form-control input-inline" name="nickname" />
            <input placeholder="手机号" type="number" class="form-control input-inline" name="tel" />
            <button class="btn purple right search radius6"><i class="fa fa-search"></i> 查询</button>
        </form>
    </div>
</div>
<div class="row">
    <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th>用户昵称</th>
                <th>手机号</th>
                <th>分公司</th>
                <th>加盟店</th>
                <!--<th>余额</th>-->
                <th>当前积分</th>
                <th>注册时间</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

<script type="text/javascript">
    var resourceUrl = "/user";
    $(function () {
        DataTable.init({
            url: resourceUrl, //ajax请求url
            tableName: "data-table", //数据表table id
            paramsFormName: "search-form", //查询参数form id
            modal: "modals", //模态框div
            columns: [ //列对应的字段数组，注意顺序
                {
                    data: "nickname"
                },
                {
                    data: "tel"
                },
                {
                    data: "branchId",
                    visible: false
                },
                {
                    data: "branchName",
                },
                {
                    data: "liteId",
                    visible: false
                },
                {
                    data: "liteName",
                },
//                {
//                    data: "balance"
//                },
                {
                    data: "integral"
                },
                {
                    data: "createdAt",
                    type: "datetime"
                },
            ],
            options: [ //操作区域(id)
                {
                    icon: "fa fa-edit",
                    name: "加盟店更换",
                    option: "modal-edit",
                    edit: true,
                    url: resourceUrl + "/{id}",
                },
//                {
//                    icon: "fa fa-edit",
//                    name: "积分调整",
//                    option: "modal-integral",
//                    edit: true,
//                    url: resourceUrl + "/{id}/integral",
//                },
            ],
            endFnOnce: "loadSelect",
        });
    });

    function loadSelect(data) {
        var branches = data.branches;
        var lites = data.lites;
        $.each(branches, function (k, v) {
            $("select[name=branchId]").append("<option value='" + v.id + "'>" + v.branchName + "</option>");
        });
        $.each(lites, function (k, v) {
            $("select[name=liteId]").append("<option value='" + v.id + "'>" + v.liteName + "</option>");
        });
    }
    $("select").select2();
</script>